/* Copyright (c) 2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import bb.cascades 1.0
//import "Common"

// This is the CustomDialog for the CustomDialog recipe. It is a custom-built
// overlay illustrating alarm with at toggle button for dismissal.

Dialog {    
    property variant currentItem
    Container {
        // The dialog does not automatically fill the entire screen like a Page does. So in order
        // to center the dialog on the screen, the width and height must be set.
        preferredWidth: 1280
        preferredHeight: 1280
        topPadding: 100
        onTouch: customdialog.close();
        // The background is set to semi-transparent to indicate that it is not possible to interact
        // with the screen behind the dialog.
        background: Color.create (0.0, 0.0, 0.0, 0.5)

        layout: DockLayout {
        }

        Container {
            horizontalAlignment: HorizontalAlignment.Center
            Label{
                text: currentItem.code
                textStyle.color: Color.Red
                textStyle.fontSize: FontSize.Large
                horizontalAlignment: HorizontalAlignment.Center
                textStyle.fontWeight: FontWeight.Bold
            }
            background: bgPaint.imagePaint
            layout: StackLayout {
                        
                    }
            preferredWidth: 500.0
            preferredHeight: 500.0
            topPadding: 40
            leftPadding: 30
            rightPadding: 30
            Label {
                text:  currentItem.title
                multiline: true
                textStyle.color: Color.create("#23bc04")
                textStyle.fontWeight: FontWeight.Bold
                horizontalAlignment: HorizontalAlignment.Center
            }
            Label {
                text:{
                    currentItem.artists==""?"": "Tác giả: "+ currentItem.artists
                }  
                textStyle.color: Color.create("#ede508")
            }
            Label {
                text: currentItem.lyrics
                textStyle.color: Color.Black
                multiline: true
                textStyle.fontStyle: FontStyle.Italic
            }
        }// Container
        
    }// Container
    attachedObjects: [
        ImagePaintDefinition {
	        id: bgPaint
	        imageSource: "asset:///images/dialog-bg.jpg"
            repeatPattern: RepeatPattern.X
        }
    
    ]
}